<script setup lang="ts">
import { ElMessage, type FormRules } from 'element-plus'
import { reactive, ref } from 'vue'

const emit = defineEmits(['update'])

// 发布文章对话框控制
const updateDialogFormVisible = ref(false)

//将open函数暴露给父组件，并初始化弹窗数据，如果使用父子传参传递信息，会有异步的问题
const open = (row: Row) => {
  // 设置编辑文章类型时显示已有内容，即将弹窗表内容设为当前行的内容，当点击当前行的编辑按钮时触发
  updateDialogFormVisible.value = true
  console.log('打印row', row)

  // 初始化表单数据
  form.value = {
    id: row?.id ?? 0,
    link: row?.link ?? '',
    show: row?.show ?? 0,
    sortNum: row?.sortNum ?? 0,
    tag: row?.tag ?? '',
    title: row?.title ?? '',
    type: row?.type ?? ''
  }
}

defineExpose({
  open
})

// 添加初始化首页文章表单
const form = ref<row>({
  id: 0,
  link: '',
  show: 0,
  sortNum: 0,
  tag: '',
  title: '',
  type: 0
})

// 表单标签宽度
const formLabelWidth = '100px'

// 表单验证
const rules = reactive<FormRules>({
  title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
  link: [{ required: true, message: '请输入文章链接', trigger: 'blur' }],
  sortNum: [{ required: true, message: '请输入文章排序', trigger: 'blur' }],
  tag: [{ required: true, message: '请输入文章标签', trigger: 'blur' }]
})

const formRef = ref()

// 退出刷新弹窗
const handleBack = () => {
  updateDialogFormVisible.value = false
  // 清空表单
  if (formRef.value) {
    formRef.value.resetFields()
    formRef.value.clearValidate()
  }
}
</script>

<template>
  <el-dialog v-model="updateDialogFormVisible" title="更改模块文章内容" width="40%">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item label="显示顺序" :label-width="formLabelWidth" required prop="sortNum">
        <el-input v-model="form.sortNum" autocomplete="off" type="number" />
      </el-form-item>

      <el-form-item label="标题" :label-width="formLabelWidth" required prop="title">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>

      <el-form-item label="链接" :label-width="formLabelWidth" required prop="link">
        <el-input v-model="form.link" autocomplete="off" />
      </el-form-item>

      <el-form-item label="标签" :label-width="formLabelWidth" required prop="tag">
        <el-input v-model="form.tag" autocomplete="off" />
      </el-form-item>

      <el-form-item label="文章类型" :label-width="formLabelWidth" required prop="type">
        <el-select v-model="form.type" placeholder="公众号" width="30px">
          <el-option label="官网" :value="1" />
          <el-option label="公众号" :value="0" />
        </el-select>
      </el-form-item>

      <el-form-item label="是否展示" :label-width="formLabelWidth" required prop="show">
        <el-select v-model="form.show" placeholder="是" width="30px">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleBack">取消</el-button>
        <el-button type="primary">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
